<template>
  <div>
    <!-- v-cloak     防止源代码暴露，，，页面加载完才能显示 -->
    <footer class="footer" v-cloak>
      <span class="todo-count">
        <strong>未完成{{ num }}条</strong>
      </span>
      <ul class="filters">
        <li>
          <a href="#" @click="filterFn('all')">全部</a>
          <a href="#" @click="filterFn('active')">未完成</a>
          <a href="#" @click="filterFn('completed')">已完成</a>
        </li>
      </ul>
      <button class="clear-completed" @click="clearAllClk">
        删除已完成
      </button>
    </footer>
  </div>
</template>

<script>
import { mapGetters, mapActions } from "vuex";
export default {
  methods: {
    ...mapActions("todolist", ["filterFn","clearAllClk"]),
  },
  computed: {
    ...mapGetters("todolist", ["num"]),
  },
};
</script>

<style scoped></style>
